<template>
	<view>
		<mescroll-uni :scroll-y="true" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="allowRefresh">
				<view class="newcontent">
					<block v-for="(newsItem, newsIndex) in newsList.data" :key="newsIndex">
						<view class="index-item" @click="bindClick(newsItem)">
							<view v-if="newsItem.class == 'noimg'" :class="newsItem.class">
								<view :class="'newtitle fontsize'+fontsizenub">{{newsItem.title}}</view>
								<view class="commonshow">
									<view class="seenub"><text class="'nubdata">{{newsItem.uploadTime}}</text></view>
									<view class="seenub" v-if="newsItem.label"><text class="'nubdata">{{newsItem.label}}</text></view>
								</view>
							</view>
							<view v-if="newsItem.class == 'frist-img'" class="oneimg"> 
								<view class="frist-img">
									<view class="firstimgbox">
										<image :src="localurl+newsItem.picture" mode="widthFix"></image>
									</view>
									<view class="fristinfo">
										<view :class="'newtitle fontsize'+fontsizenub">{{newsItem.title}}</view>
										<view class="commonshow">
											<view class="seenub"><text class="'nubdata">{{newsItem.uploadTime}}</text></view>
											<view class="seenub" v-if="newsItem.label"><text class="'nubdata">{{newsItem.label}}</text></view>
										</view>
									</view>
								</view>
							</view>
							<view v-if="newsItem.class == 'oneimg'"  :class="[newsItem.class,'oneimger']">
								<view class=".imgfather">
									<image :src="localurl+newsItem.picture" class="imageonly"/></image>
								</view>
								<view class="oneimgbox">
									<view :class="'newtitle fontsize'+fontsizenub">{{newsItem.title}}</view>
									<view class="commonshow">
										<view class="seenub"><text class="'nubdata">{{newsItem.uploadTime}}</text></view>
										<view class="seenub" v-if="newsItem.label"><text class="'nubdata">{{newsItem.label}}</text></view>
									</view>
								</view>
							</view>
							<view v-if="newsItem.class == 'threeimg'" :class="[newsItem.class]">
								<view :class="'newtitle fontsize'+fontsizenub">{{newsItem.title}}</view>
								<view class="threeimgbox">
									<view class="smbox">
										<image :src="localurl+newsItem.picture"/></image>
									</view>
									<view class="smbox">
										<image :src="localurl+newsItem.picture1"/></image>
									</view>
									<view class="smbox">
										<image :src="localurl+newsItem.picture2"/></image>
									</view>
								</view>
								<view class="commonshow">
									<view class="seenub"><text class="'nubdata">{{newsItem.uploadTime}}</text></view>
									<view class="seenub" v-if="newsItem.label"><text class="'nubdata">{{newsItem.label}}</text></view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view class="uni-tab-bar-loading">
					<view class="loading-more">{{newsList.loadingText}}</view>
				</view>
			</view>
			
		</mescroll-uni>	
	</view>
</template>

<script>
	import {common} from '@/common/publish.js';
	import {mapState,mapMutations} from 'vuex';
	import MescrollUni from "mescroll-uni";
	export default{
		data(){
			return{
				localurl:common.url,
				newsList:{
					data: [],
					offset: 0,
					limit: 10,
					loadingText: '加载中...'
				},
				upOption: {
					auto: false
				},
				downOption:{},
				navigateId:''
			}
		},
		components:{
			MescrollUni
		},
		onLoad(option){
			let navigateId = option.navigateId;
			this.navigateId = navigateId
			this.getList(mescroll,navigateId)
		},
		methods:{
			//刷新
			downCallback(mescroll){
				this.newsList.offset = 0;
				this.getList(mescroll,this.navigateId)
			},
			//加载
			upCallback(mescroll){
				if (this.newsList.loadingText == '加载中...') {
					return false;
				}
				this.getList(mescroll,this.navigateId);
			},
			//跳转
			bindClick(data){
				if(data.articleType == 1 || data.articleType == 0){
					if(data.link){
						//如果连接存在 ==》 外链
						var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
						var wherefrom = reg.test(data.link);
						if(wherefrom){
							uni.navigateTo({
								url:'/pages/turnLink/turnLink?type=index&link='+encodeURIComponent(JSON.stringify(data.link))+'title='+data.title
							})
						}
					}else{
						//本地
						uni.navigateTo({
							url: '/pages/xq/xq?type=index&id=' + data.id
						});
					}
				}
			},
			//加载列表
			getList(mescroll,navigateId){
				uni.request({
					url: common.url + '/api/newsCentre/appointNavList.json',
					data:{
						offset: this.newsList.offset,
						limit: 10,
						navigateId
					},
					success:res => {
						if (res.statusCode == 200) {
							if (res.data.rows.length > 0) {
								res.data.rows.forEach((v) => {
									if (v.displayType == '多图') {
										v.class = 'threeimg'
									} else if (v.displayType == '纯文字') {
										v.class = 'noimg'
									} else if (v.displayType == '单图') {
										v.class = 'oneimg'
									} else if (v.displayType == '广告') {
										v.class = 'frist-img'
									} else {
										v.class = 'noimg'
									}
									if (v.label && v.label.length > 7) v.label = v.label.substring(0, 6) + '...';
								});
								if(this.newsList.offset == 0){
									this.newsList.data = res.data.rows;
								}else{
									res.data.rows.forEach((v) => {
										this.newsList.data.push(v)
									})
								}
							}else{
								//导航项中的列表为空
								this.newsList.data = res.data.rows;
								this.newsList.loadingText = '暂无更多信息'
							}
							this.newsList.offset = parseInt(this.newsList.offset) + parseInt(res.data.limit);
							this.newsList.total = res.data.total;
							if (this.newsList.offset >= this.newsList.total) {
								this.newsList.loadingText = '没有更多数据了'
								mescroll.endSuccess(10,false)
							} else {
								this.newsList.loadingText = '下拉加载更多'
								mescroll.endSuccess(10,true)
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/publish.scss';
	@include fontsizefn(".zbtt",32upx);
	@include fontsizefn(".newtitle",32upx);
	.nubdata{
		font-size:28upx;
	}
	view {
	    display: flex;
	    flex-direction: column;
	    box-sizing: border-box;
	}
	
	.list-cell {
	    width: 750upx;
	    padding: 0 30upx;
	}
	
	.uni-list-cell-hover {
	    background-color: #eeeeee;
	}
	
	.media-list {
	    flex: 1;
	    flex-direction: column;
	    border-bottom-width: 1upx;
	    border-bottom-style: solid;
	    border-bottom-color: #c8c7cc;
	    padding: 20upx 0;
	}
	
	.media-image-right {
	    flex-direction: row;
	}
	
	.media-image-left {
	    flex-direction: row-reverse;
	}
	
	.media-title {
	    flex: 1;
	}
	
	.media-title {
	    lines: 3;
	    text-overflow: ellipsis;
	    font-size: 1rem;
	    color: #555555;
	}
	
	.media-title2 {
	    flex: 1;
	    margin-top: 6upx;
	    line-height: 40upx;
	}
	
	.image-section {
	    margin-top: 20upx;
	    flex-direction: row;
	    justify-content: space-between;
	}
	
	.image-section-right {
	    margin-top: 0upx;
	    margin-left: 10upx;
	    width: 225upx;
	    height: 146upx;
	}
	
	.image-section-left {
	    margin-top: 0upx;
	    margin-right: 10upx;
	    width: 225upx;
	    height: 146upx;
	}
	
	.image-list1 {
	    width: 690upx;
	    height: 481upx;
	}
	
	.image-list2 {
	    width: 225upx;
	    height: 146upx;
	}
	
	.image-list3 {
	    width: 225upx;
	    height: 146upx;
	}
	
	.media-info {
	    flex-direction: row;
	}
	
	.info-text {
	    margin-right: 20upx;
	    color: #999999;
	    font-size: 24upx;
	}
	
	.media-foot {
	    margin-top: 20upx;
	    flex-direction: row;
	    justify-content: space-between;
	}
	
	.max-close-view {
	    align-datas: center;
	    justify-content: flex-end;
	    flex-direction: row;
	    height: 40upx;
	    width: 80upx;
	}
	
	.close-view {
	    border-style: solid;
	    border-width: 1px;
	    border-color: #999999;
	    border-radius: 10upx;
	    justify-content: center;
	    height: 30upx;
	    width: 40upx;
	    line-height: 30upx;
	}
	
	.close {
	    text-align: center;
	    color: #999999;
	    font-size: 28upx;
	}
	.scrollbox {
		width: 648upx;
	}
	
	.uni-tab-bar {
		display: flex;
		flex: 1;
		flex-direction: column;
		height: 100%;
		padding: 0 30upx;
		position: relative;
	}
	.tab-scroll{
		white-space: nowrap;
		height: 140upx;
		flex-direction: row;
	}
	.tabbar{
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 140upx;
		padding: 24upx 0upx;
		background-color: #FFFFFF;
		transform: translateY(-75%);
		box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
		border-radius: 10upx;
		.tab-item{
			width: 138upx;
			padding:24upx 39upx;
			display: inline-block;
			.tab-info{
				display: flex;
			}
			image{
				width: 60upx;
				height: 60upx;
			}
			text{
				text-align: center;
				font-size: 24upx;
			}
		}
			
	}
	.banner-box{
		margin-top: -70upx;
	}
	.uni-tab-bar .list {
		width: 750upx;
		height: 100%;
	}
	.notice{
		width: 100%;
		height:140upx;
		margin-top: 16upx;
		margin-bottom: 6upx;
		border-radius: 10upx;
		box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
		image{
			border-radius: 10upx;
			width: 100%;
			
		}
	}
	.news-list{
		margin-top: 20upx;
		border-radius: 10upx;
		box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
		overflow: hidden;
	}
	.uni-swiper-tab {
		width: 100%;
		white-space: nowrap;
		line-height: 88upx;
		height: 88upx;
	}
	
	.swiper-tab-list {
		font-size: 32upx;
		width: 108upx;
		display: inline-block;
		text-align: center;
		color: #d9dee1;
	}
	
	.uni-tab-bar .active {
		color: #ffffff;
		font-weight: bold;
	}
	
	.uni-tab-bar .swiper-box {
		flex: 1;
		width: 100%;
		height:100%;
	}
	.swiper-isitem{
		height:100%;
	}
	.uni-tab-bar-loading {
		padding: 20upx 0;
	}
	
	.magTopClass88 {
		//padding-top: 88upx;
		//margin-top: 88upx;
	}
	
	.magTopClass0 {
		margin-top: 0;
	}
	
	.uni-tab-bar-loading {
		text-align: center;
		padding: 20upx 0;
		font-size: 14px;
		color: #CCCCCC;
	}
</style>
